<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>混合布局</title>
<style>
*{margin:0;padding:0;}
#header{
    height:50px;
    background:blue;
}
#main{
    width:100%;
    overflow:hidden;
}
#main .main-left{
    width:20%;
    height:800px;
    background:lightgreen;
    float:left;
}
#main .main-right{
    width:80%;
    height:800px;
    float:right;
}
#main .main-right .right-l{
    width:80%;
    height:800px;
    background:yellow;
    float:left;
}
#main .main-right .right-r{
    width:20%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    height:50px;
    background:gray;
}
</style>
</head>
<body>
<header id="header">头部</header>
<section id="main">
    <aside class="main-left">左边</aside>
    <div class="main-right">
        <section class="right-l">右-左</section>
        <section class="right-r">右-右</section>
    </div>
</section>
<footer id="footer">页脚</footer>
</body>
</html>